<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #infoDiv {
            position: absolute;
            top: 15px;
            left: 60px;
        }

        #infoDiv input {
            border: none;
            box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        require([
            "esri/views/MapView",
            "esri/views/SceneView",
            "esri/WebMap",
            "esri/WebScene"
        ], function (MapView, SceneView, WebMap, WebScene) {
            let type=2;

            let map2d = new WebMap({
                portalItem: {
                    id: "7ee3c8a93f254753a83ac0195757f137"
                }
            });

            let map3d = new WebScene({
                portalItem: {
                    // autocasts as new PortalItem()
                    id: "c8cf26d7acab4e45afcd5e20080983c1"
                }
            });

            function switchView() {
                console.log();
                let scene;
                if(type===2){
                    type=3;
                    scene=new SceneView({
                        map:map3d,
                        container:"viewDiv"
                    });
                }
                else{
                    type=2;
                    scene=new MapView({
                        map:map2d,
                        container:"viewDiv"
                    });
                }
            }


            let switchButton = document.getElementById("switch-btn");
            switchButton.addEventListener("click", function () {
                switchView();
            });
        });


    </script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
    <input
            class="esri-component esri-widget--button esri-widget esri-interactive"
            type="button"
            id="switch-btn"
            value="3D"
    />
</div>
</body>
</html>
